<template>
  <div>
    <a
      href="javascript:;"
      @click="skipRouter({path:'/activtyDetails',query:{activityId:item.activityId}})"
      class="ActivityList-tab-item"
      v-for="(item, index) in list"
      :key="index"
    >
      <img
        v-if="item.schedule==1||item.schedule==2||item.schedule==3"
        class="img-icon"
        src="@/assets/img/baomingzhong.png"
        alt
      />
      <img v-if="item.schedule==3" class="img-icon" src="@/assets/img/jinxingzhong.png" alt />
      <img v-if="item.schedule==4" class="img-icon" src="@/assets/img/yijieshu.png" alt />
      <img :src="imgUrl+item.listImg" alt />
      <div class="txt">
        <div class="title van-ellipsis">{{item.title}}</div>
        <div class="user van-ellipsis">
          主办方：
          <span>{{item.hostunit}}</span>
        </div>
        <div class="location van-ellipsis">
          时 间：
          <span>{{item.startTime.split(" ")[0]}}</span>
        </div>
        <div class="date van-ellipsis">
          地 址：
          <span>{{item.address}}</span>
        </div>
        <!-- <div class="fire" v-if="item.isFire">火热报名中</div> -->
      </div>
    </a>
  </div>
</template>
<script>
export default {
  name: 'activityItem',
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      imgUrl: config.imgUrl,
    }
  },
  mounted() {
    console.log(this.list, 'ss')
  },
  methods: {
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/base';
.ActivityList-tab-item {
  display: flex;
  margin-top: px2rem(30);
  position: relative;

  & > img {
    width: px2rem(295);
    height: px2rem(194);
    border-radius: px2rem(5);
    margin-right: px2rem(28);
    object-fit: cover;
  }
  .img-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: px2rem(76);
    height: px2rem(34);
  }
  & > .txt {
    display: flex;
    flex-direction: column;
    width: px2rem(360);
    & > .title {
      color: #000000;
      font-size: px2rem(28);
      margin-bottom: px2rem(10);
    }
    & > .user,
    & > .location,
    & > .date {
      color: #5a5a5a;
      font-size: px2rem(24);
      line-height: 1.7;
    }
    & > .fire {
      margin-top: px2rem(10);
      @include bgImg(
        px2rem(150),
        px2rem(30),
        './../../assets/img/activity/fire.png'
      );
      background-position: left center;
      line-height: px2rem(30);
      padding-left: px2rem(35);
      font-size: px2rem(20);
      color: #ff0000;
    }
  }
}
</style>